var flag=false;//处理验证是否通过，默认为不通过
var box=document.getElementById('box');//大盒子
var btn=document.getElementsByClassName('btn')[0];//滑块
var text=document.getElementsByClassName('text')[0];//文字
var bg=document.getElementsByClassName('bg')[0];//背景
//鼠标按下事件
btn.onmousedown=function(e){
    var downX=e.clientX;//按下按钮后与窗口的x轴间距
    // 鼠标移动事件
    btn.onmousemove=function(e){
        var moveX=e.clientX-downX;//滑动的时候距离窗口的x轴的间距
        //只有在大于0的时候才拖动,否则会出现反向拖动
        if(moveX>0){
            btn.style.left=moveX+'px';//滑块与左边的距离
            bg.style.width=moveX+'px'; //背景的宽度就是滑块距离左边的位置
            if(moveX>=(box.offsetWidth-btn.offsetWidth)){
                text.innerText="验证成功";
                text.style.color="#fff";
                btn.onmousemove=null;
                btn.onmousedown=null;
                flag=true;
            }
        }
    }
}
// 鼠标松开事件
btn.onmouseup=function(){
    //为假的时候
    if(flag==false){
        btn.onmousemove=null;//清除事件
        btn.style.left=0;
        bg.style.width=0;
    }

}